<style lang="less" scoped>
    .main_ul {
        width: 2.5rem;
        height: 50%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        float: left;
        background: #f7f7f7;
        color: #222;
        font-size: 0.28rem;
        &:first-child {
            width: 1.88rem;
            text-align: left;
            background: #efefef;
            li.active:before {
                content: '';
                display: block;
                width: 0.06rem;
                height: 0.48rem;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: #e9954f;
            }
        }
        &:last-child {
            flex: 1;
            background: #fff;
            li.active:after {
                content: '';
                display: block;
                width: 0.34rem;
                height: 0.24rem;
                position: absolute;
                right: 0.24rem;
                top: 0;
                bottom: 0;
                margin: auto;
                background: url("../assets/img/checkMark_icon.png") no-repeat;
                background-size: 100%;
            }
        }
        li {
            position: relative;
            padding: 0.3rem 0.24rem;
            &.active {
                color: #e9954f;
                background-color: #fff;
            }
        }
    }

</style>
<template>
    <div style="height:auto;display: flex">
        <ul class="main_ul">
            <li v-for="option in provArr" @click="liClick(option, 'prov')" :class="option == prov ?'active':''">
                {{ option.name }}
            </li>
        </ul>
        <!--<ul class="main_ul">
            <li v-for="option in cityArr" @click="liClick(option, 'city')" :class="option == city ?'active':''">
                {{ option.name }}
            </li>
        </ul>-->
    </div>
</template>
<script>
    export default {
        data() {
            return {
                arr: [],
                prov: {},
                city: {},
                provArr: [],
                cityArr: [],
            };
        },
        props: {
            callback: {
                type: Function,
                default: function () {
                    return '1';
                }
            }
        },
        methods: {
            getData: function () {
                let that = this
                this.$ajax.inFo.queryCategory()
                    .then((resp) => {
                        that.arr = resp.body.content;
                        that.updateProv();
                        // that.updateCity();
                    });
            },
            updateProv: function () {
                var provArr = [];
                for (var i in this.arr) {
                    var obj = this.arr[i];
                    if (obj.parentCode == 0) {
                        provArr.push(obj);
                    }
                }
                this.provArr = provArr;
                this.prov = provArr[0];
            },
            updateCity: function () {
                var cityArr = [];
                for (var i in this.arr) {
                    var obj = this.arr[i];
                    if (obj.parentCode == this.prov.code) {
                        cityArr.push(obj);

                    }
                }
                this.cityArr = cityArr;
                this.city = this.cityArr[0];
            },
            liClick: function (s, e) {
                console.log(s, e)
                this[e] = s
                this.$emit('active', s);
            },
            getCateData: function () {
                return [this.prov, this.city]
            }
        },
        activated: function () {
            this.getData();

        },
        watch: {
            /*prov: function () {
                this.updateCity();
            }*/
        }
    }
</script>